<template>
	<view class="page">
		<view class="page_header"><navigation defaultButton="back">预约服务</navigation></view>
		<view class="page_panel">
			<view class="page_main">
				<view class="card_info">
					<image class="image" :src="detail.images[0]" mode=""></image>
					<view class="info">
						<view class="info_header">
							<viwe class="title">
								<view class="titile_text">{{ detail.name || '' }}</view>
								<view class="sign green" v-if="detail.zhengce == $enums['服务政策']['公益']">公益</view>
								<view class="sign orange" v-if="detail.zhengce == $enums['服务政策']['常规']">常规</view>
							</viwe>
						</view>
						<view class="info_container">
							<view class="text">{{ detail.content }}</view>
						</view>
						<veiw class="info_footer">
							<view class="organization">·{{ detail.companyName || '' }}</view>
							<text class="pirce" v-if="detail.money && detail.money > 0">￥{{ detail.money | toFixed(2) }}/次</text>
							<text class="pirce gratis" v-else>免费</text>
						</veiw>
					</view>
				</view>
				<view class="card_input">
					<view class="form-item first_form-item">
						<view class="form-item__name">
							<view class="label">服务地址</view>
							<input class="input" v-model="detail.address" type="text" placeholder="请输入服务地址" placeholder-class="input_placeholder" />
						</view>
						<view class="form-item__value"></view>
					</view>
					<hTimePicker sTime="8" cTime="18" interval="30" dayNum="100" @changeTime="changeTime">
						<view slot="pCon" class="changeTime">
							<view class="form-item">
								<view class="form-item__name">服务时间</view>
								<view class="form-item__value">
									<view class="form-item__value-input">
										{{ detail.serviceStartTime | toDate('yyyy-MM-dd hh:mm') || '请选择服务时间' }}
										<text class="nursing-icon iconyoujiantou right-bar"></text>
									</view>
								</view>
							</view>
						</view>
					</hTimePicker>
					<form-input type="number" name="联系电话" v-model="detail.phone" placeholder="请填写联系方式"></form-input>
				</view>
				<button class="page_btn" hover-class="page_btn-hover" @tap="goNextStep">确认下单</button>
			</view>
		</view>
	</view>
</template>

<script>
import * as userServeApi from '@/api/userApi/serve.js';
import pickers from '@/components/ming-picker/ming-picker.vue';
import hTimePicker from '@/components/h-timePicker/h-timePicker.vue';
export default {
	components: {
		pickers,
		hTimePicker
	},
	data() {
		return {
			$enums: this.$enums,
			id: '',
			userInfo: this.$store.getters.getUserInfo,
			detail: {
				images: [],
				address: '',
				serviceStartTime: '',
				phone: '',
				id: ''
			}
		};
	},
	onShow() {
		// this.userInfo=uni.getStorageSync('open')
	},
	methods: {
		goNextStep() {
			console.log('detail',this.detail)
			if(this.detail.address==undefined||this.detail.serviceStartTime==undefined
			||this.detail.address==''
			){
				
				uni.showToast({
					title:"请补全信息后再进行预约",
					icon:'none',
					position:'center'
				})
			}else{
				console.log('else')
			userServeApi
				.appointment(this.detail)
				.then(res => {
					if (res.code === 0) {
						uni.switchTab({
							url: '/pages/serve/serve'
						});
					} 
				}) 
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
				}
		},
		changeTime(event) {
			this.$set(this.detail,'serviceStartTime',event);
		},
		pickersChangeLabel(event) {
			if (event && event.value) {
				this.detail.area = event.value.join('');
				this.detail.areaArray = event.value;
			}
		},
		pickersChangeCode(event) {
			// console.log("code", event);
		},
		getDetail(id) {
			userServeApi
				.queryDetails({ id: id })
				.then(res => {
					if (res.code === 0) {
						this.detail = res.data;
						this.detail.phone = this.userInfo.phone;
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		}
	},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.getDetail(options.id);
		}
	}
};
</script>

<style lang="stylus">
.page_btn
	margin-top 120rpx
.page_panel
	position absolute
	top calc(280rpx + var(--status-bar-height))
	right 0rpx
	bottom 0
	left 0rpx
	background-color rgba(243, 243, 243, 1)
	.page_main
		padding 0rpx 30rpx
		position relative
		top -140rpx
		right 0rpx
		left 0rpx
		bottom 0rpx
	.card_info
		display flex
		justify-content space-between
		padding 30rpx 32rpx
		box-sizing border-box
		background-color #FFFFFF
		border-box border-box
		border-radius 12rpx
		.image
			width 204rpx
			height 204rpx
			border-radius 23rpx
		.info
			flex 1
			margin-left 20rpx
			box-sizing border-box
			display flex
			flex-direction column
			justify-content space-between
			.info_header
				width 100%
				display flex
				justify-content space-between
				.title
					flex 1
					margin-right 10rpx
					letter-spacing 1rpx
					font-size 32rpx
					font-family PingFang SC
					font-weight 400
					color #333333
					display flex
					.titile_text
						flex 1
						overflow hidden
						text-overflow ellipsis
						display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp 1 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap break-word
					.sign
						margin-left 10rpx
						font-size 28rpx
						font-family PingFang SC
						font-weight 400
						color #FFFFFF
						padding 4rpx
						border-radius 8rpx
						transform scale(0.7)
					.green
						background-color rgba(0, 181, 0, 1)
					.orange
						background-color rgba(246, 132, 21, 1)
			.info_container
				flex 1
				margin-top 15rpx
				font-size 24rpx
				letter-spacing 1rpx
				font-family PingFang SC
				font-weight 400
				color #999999
				.text
					overflow hidden
					text-overflow ellipsis
					display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp 2 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
					word-wrap break-word
			.info_footer
				margin-top 10rpx
				display flex
				justify-content space-between
				.organization
					background-color rgba(37, 143, 255, 0.1)
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #4594FF
					border-radius 10rpx
					padding 3rpx 8rpx
				.pirce
					font-size 32rpx
					font-family PingFang SC
					font-weight bold
					color #FF4200
				.gratis
					color rgba(51, 51, 51, 1)
	.card_input
		margin-top 20rpx
		border-radius 12rpx
		background-color #FFFFFF
		padding 40rpx 25rpx 40rpx 25rpx
		.form-item
			min-height auto
			margin-top 50rpx
			.form-item__name
				.input
					margin-top 10rpx
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #333333
				.input_placeholder
					color #999
					font-size 24rpx
					text-align left
		.first_form-item
			margin-top 0rpx
			.form-item__name
				width 100%
.icon
	.nursing-icon
		font-size 20rpx
.right-bar
	margin-left 15rpx
	font-size 20rpx
</style>
